Forms এবং Input Handling

Flutter এ Forms এবং Input Handling হলো এমন প্রক্রিয়া, যার মাধ্যমে ব্যবহারকারী অ্যাপের মধ্যে ইনপুট দিতে পারে এবং অ্যাপ তা গ্রহণ, যাচাই, এবং প্রক্রিয়াজাত করে। Forms ব্যবহার করে সাধারণত লগইন, সাইন-আপ, এবং ডেটা ইনপুট ফর্ম তৈরি করা হয়। Flutter এ Form Widget এবং বিভিন্ন ইনপুট ফিল্ড Widget এর সাহায্যে আপনি সহজেই ফর্ম তৈরি করতে পারেন।

Flutter এ Form এর বেসিক কাঠামো:

Flutter এ একটি Form তৈরি করতে Form Widget ব্যবহার করা হয়, যা TextFormField, DropdownButton, Checkbox, এবং অন্যান্য ইনপুট ফিল্ড ধারণ করতে পারে। Form Widget একটি কন্টেইনার হিসেবে কাজ করে যা ইনপুট ফিল্ডগুলোকে সংগঠিত করে এবং তাদের মান যাচাই করতে সাহায্য করে।

Form এবং Input Handling এর ধাপগুলো:

১. Form তৈরি করা:

Form Widget ফর্মের জন্য একটি কন্টেইনার হিসেবে কাজ করে। এটি ইনপুট ফিল্ড এবং অন্যান্য ফর্ম উপাদান ধারণ করতে পারে।

Form(
  key: _formKey, // ফর্মের জন্য একটি গ্লোবাল কী
  child: Column(
    children: >Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: 'Name'),
      ),
      TextFormField(
        decoration: InputDecoration(labelText: 'Email'),
      ),
      ElevatedButton(
        onPressed: () {
          // ফর্ম যাচাই করা হবে এখানে
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

• _formKey: এটি একটি গ্লোবাল কী যা ফর্মকে চিহ্নিত করে এবং যাচাই প্রক্রিয়া পরিচালনা করতে সাহায্য করে।
• TextFormField: ইনপুট ফিল্ড যেখানে ব্যবহারকারী টেক্সট ইনপুট করতে পারে। এটি ফর্মের একটি প্রধান উপাদান।

২. Form Validation:

ফর্মের ইনপুট যাচাই করতে validator প্রপার্টি ব্যবহার করা হয়। TextFormField এ validator প্রপার্টি নির্ধারণ করে ইনপুট মান যাচাই করা হয়।

final _formKey = GlobalKey>FormState>();

Form(
  key: _formKey,
  child: Column(
    children: >Widget>[
      TextFormField(
        decoration: InputDecoration(labelText: 'Name'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your name';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // ফর্মটি যদি বৈধ হয়, তখন প্রক্রিয়া করা হবে
            print('Form is valid');
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

• _formKey.currentState!.validate(): এটি ফর্মের প্রতিটি ইনপুট ফিল্ডের validator চেক করে এবং ফর্মের ইনপুটগুলো বৈধ কিনা তা যাচাই করে।
• যদি ইনপুট ফিল্ড খালি থাকে, তাহলে একটি ত্রুটি মেসেজ প্রদর্শন করা হবে।

৩. Text Editing Controller ব্যবহার করা:

ফর্মের ইনপুট ফিল্ডের মান অ্যাক্সেস করতে এবং তাদের পরিবর্তন করতে TextEditingController ব্যবহার করা হয়। এটি ইনপুট ফিল্ডের ডেটা ম্যানেজ এবং রিয়েল-টাইম আপডেট দেখতে সহায়তা করে।

final TextEditingController nameController = TextEditingController();

TextFormField(
  controller: nameController,
  decoration: InputDecoration(labelText: 'Name'),
)

• nameController.text: ইনপুট ফিল্ডের বর্তমান মান সংগ্রহ করতে এটি ব্যবহার করা হয়।
• nameController.dispose(): কন্ট্রোলার ব্যবহার শেষে এটি ডিসপোজ করতে হয় মেমোরি লিক এড়াতে।

৪. FocusNode ব্যবহার করা:

Flutter এ ফর্ম ফিল্ডগুলোর মধ্যে ফোকাস নেভিগেট করতে FocusNode ব্যবহার করা হয়।

final FocusNode emailFocusNode = FocusNode();

TextFormField(
  focusNode: emailFocusNode,
  decoration: InputDecoration(labelText: 'Email'),
)

• FocusNode ব্যবহার করে একটি নির্দিষ্ট ইনপুট ফিল্ডে ফোকাস সেট করা বা সরানো যায়। উদাহরণস্বরূপ, একটি ইনপুট ফিল্ড পূরণ করার পর অন্য ইনপুট ফিল্ডে স্বয়ংক্রিয়ভাবে ফোকাস সরানো।

ফর্মের অন্যান্য ইনপুট উপাদান:

১. DropdownButtonFormField:

ড্রপডাউন মেনু থেকে একটি মান নির্বাচন করতে ব্যবহৃত হয়।

DropdownButtonFormField>String>(
  value: selectedValue,
  items: >String>['Option 1', 'Option 2', 'Option 3']
      .map>DropdownMenuItem>String>>((String value) {
    return DropdownMenuItem>String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue!;
    });
  },
  decoration: InputDecoration(labelText: 'Select an option'),
)

২. Checkbox:

একটি চেকবক্স তৈরি করতে ব্যবহৃত হয়।

bool isChecked = false;

CheckboxListTile(
  title: Text('I agree to the terms and conditions'),
  value: isChecked,
  onChanged: (bool? value) {
    setState(() {
      isChecked = value!;
    });
  },
)

৩. Switch:

একটি সুইচ বাটন যা টগল করা যায়।

bool isSwitched = false;

SwitchListTile(
  title: Text('Enable notifications'),
  value: isSwitched,
  onChanged: (bool value) {
    setState(() {
      isSwitched = value;
    });
  },
)

Form Submission এবং Input Handling সংক্ষেপে:

• Form Validation: Form এবং TextFormField এর মাধ্যমে ইনপুট যাচাই করা যায়। validator প্রপার্টি ব্যবহার করে ইনপুট চেক করা হয়।
• Text Editing Controller: ইনপুট ফিল্ডের মান কন্ট্রোল এবং রিয়েল-টাইমে অ্যাক্সেস করতে ব্যবহৃত হয়।
• FocusNode: ফর্মের ইনপুট ফিল্ডগুলোর মধ্যে ফোকাস নেভিগেট করতে সহায়ক।

Form এবং Input Handling এর সুবিধা:

• ডেটা যাচাই: ইনপুট ফিল্ডে ইনপুট যাচাই এবং বৈধকরণ করা যায়।
• ইউজার ফ্রেন্ডলি: ফোকাস এবং ইনপুট কন্ট্রোল করার সুবিধা ফর্মকে আরো ইউজার-ফ্রেন্ডলি করে তোলে।
• মাল্টিপল ইনপুট টাইপ: টেক্সট ইনপুট, ড্রপডাউন, চেকবক্স, সুইচ ইত্যাদি ইনপুট ফিল্ড সহজেই তৈরি করা যায়।

Flutter এ Forms এবং Input Handling ব্যবহার করে আপনি একটি পূর্ণাঙ্গ এবং পেশাদার ইনপুট সিস্টেম তৈরি করতে পারবেন, যা ব্যবহারকারীর ইনপুট গ্রহণ ও যাচাই করে।

Flutter এ Form এবং Input Fields তৈরি করে আপনি একটি পূর্ণাঙ্গ ফর্ম ইনপুট ব্যবস্থা তৈরি করতে পারেন, যেখানে ব্যবহারকারী বিভিন্ন তথ্য ইনপুট করতে পারে। একটি Form সাধারণত এক বা একাধিক Input Fields ধারণ করে, যেমন TextField, Dropdown, Checkbox, ইত্যাদি। নিচে একটি Form এবং বিভিন্ন Input Fields তৈরি করার ধাপসমূহ এবং উদাহরণ দেয়া হলো।

Form এবং Input Fields তৈরির ধাপসমূহ:

১. Form তৈরি করা:

Form তৈরি করার জন্য Form Widget ব্যবহার করা হয়। এটি সাধারণত একটি গ্লোবাল কী (GlobalKey<FormState>) এর সাথে যুক্ত থাকে, যা Form এর স্টেট পরিচালনা করতে সহায়তা করে।

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Form Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  // Controllers for input fields
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  String? _selectedGender;
  bool _agreeToTerms = false;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            controller: _nameController,
            decoration: InputDecoration(
              labelText: 'Name',
              border: OutlineInputBorder(),
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
          ),
          SizedBox(height: 16.0),
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(
              labelText: 'Email',
              border: OutlineInputBorder(),
            ),
            keyboardType: TextInputType.emailAddress,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your email';
              } else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
                return 'Please enter a valid email';
              }
              return null;
            },
          ),
          SizedBox(height: 16.0),
          DropdownButtonFormField<String>(
            value: _selectedGender,
            hint: Text('Select Gender'),
            items: ['Male', 'Female', 'Other'].map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String? newValue) {
              setState(() {
                _selectedGender = newValue;
              });
            },
            validator: (value) {
              if (value == null) {
                return 'Please select a gender';
              }
              return null;
            },
          ),
          SizedBox(height: 16.0),
          CheckboxListTile(
            title: Text('I agree to the terms and conditions'),
            value: _agreeToTerms,
            onChanged: (bool? value) {
              setState(() {
                _agreeToTerms = value!;
              });
            },
            controlAffinity: ListTileControlAffinity.leading,
          ),
          SizedBox(height: 16.0),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate() && _agreeToTerms) {
                // Form is valid and terms are agreed
                print('Name: ${_nameController.text}');
                print('Email: ${_emailController.text}');
                print('Gender: $_selectedGender');
              } else if (!_agreeToTerms) {
                // If terms are not agreed
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Please agree to the terms')),
                );
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

কোডের ব্যাখ্যা:

• _formKey: এটি একটি গ্লোবাল কী যা ফর্মের স্টেট ম্যানেজ করতে সাহায্য করে এবং ফর্ম যাচাই করতে ব্যবহৃত হয়।
• TextFormField: নাম এবং ইমেইল ইনপুট ফিল্ড তৈরি করতে ব্যবহার করা হয়েছে।
  • validator প্রপার্টি ইনপুট যাচাই করে এবং কোনো ত্রুটি থাকলে মেসেজ দেখায়।
• DropdownButtonFormField: একটি ড্রপডাউন তৈরি করা হয়েছে, যেখানে ব্যবহারকারী লিঙ্গ নির্বাচন করতে পারেন।
• CheckboxListTile: শর্তাবলী গ্রহণের জন্য একটি চেকবক্স ব্যবহার করা হয়েছে। এটি ফর্মের অংশ হিসেবে ইনপুট যাচাই করতে সহায়তা করে।
• ElevatedButton: একটি বাটন যা ক্লিক করলে ফর্মের ইনপুট যাচাই করা হয় এবং ফর্মের মান প্রদর্শিত হয় যদি ফর্মটি বৈধ হয়।

Form এবং Input Fields সংক্ষেপে আলোচনা:

Form এবং Input Handling এর সুবিধা:

• ইনপুট যাচাই: TextFormField এবং অন্যান্য Input Fields এর মাধ্যমে ইনপুট যাচাই করে ব্যবহারকারীর সঠিক ইনপুট নিশ্চিত করা যায়।
• ইউজার ফ্রেন্ডলি: ইনপুট ফিল্ড এবং বাটন দিয়ে সহজ এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরি করা যায়।
• ডেটা সংগ্রহ: ফর্ম ব্যবহার করে ব্যবহারকারীর ডেটা সংগ্রহ এবং প্রক্রিয়াজাত করা সহজ হয়।

এই ধাপগুলো অনুসরণ করে আপনি Flutter এ একটি পূর্ণাঙ্গ ফর্ম তৈরি করতে পারবেন, যা ব্যবহারকারীর ইনপুট গ্রহণ ও যাচাই করে এবং প্রয়োজনীয় ডেটা সংগ্রহ করে।

Flutter এ Form Validation এবং Error Handling একটি গুরুত্বপূর্ণ বিষয়, বিশেষ করে যখন আপনি এমন একটি ফর্ম তৈরি করতে চান যেখানে ইউজার থেকে ইনপুট সংগ্রহ করা হয় (যেমন লগইন ফর্ম, রেজিস্ট্রেশন ফর্ম, প্রোফাইল আপডেট ইত্যাদি)। Form Validation নিশ্চিত করে যে ইউজার সঠিক তথ্য ইনপুট করছে এবং Error Handling এর মাধ্যমে ইনপুট ভুল হলে ইউজারকে সঠিক মেসেজ প্রদর্শন করা হয়। নিচে বিস্তারিত আলোচনা এবং উদাহরণ দেওয়া হলো।

Form Validation সেটআপ করার ধাপ:

ধাপ ১: একটি Form তৈরি করা:

• Flutter এ Form Widget এবং TextFormField ব্যবহার করে ফর্ম তৈরি করা হয়।
• একটি GlobalKey তৈরি করা হয় যা ফর্মের স্টেট পরিচালনা করতে সহায়তা করে।

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form Validation',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Validation Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: MyCustomForm(),
        ),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  String? _email;
  String? _password;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Email'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your email';
              } else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
                return 'Please enter a valid email';
              }
              return null;
            },
            onSaved: (value) {
              _email = value;
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your password';
              } else if (value.length < 6) {
                return 'Password must be at least 6 characters long';
              }
              return null;
            },
            onSaved: (value) {
              _password = value;
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                _formKey.currentState!.save();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Form is valid, processing data...')),
                );
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Form is not valid, please check')),
                );
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

ধাপ ২: Form Validation এবং Error Handling কনফিগার করা:

• GlobalKey: একটি GlobalKey তৈরি করা হয় যা ফর্মের স্টেট পরিচালনা করে। এটি Form Widget এ পাস করা হয়।
• TextFormField: প্রতিটি ইনপুট ফিল্ড TextFormField ব্যবহার করে তৈরি করা হয়। এটি validator প্রপার্টি গ্রহণ করে, যা ইনপুট ফিল্ডে প্রবেশ করা তথ্য সঠিক কিনা তা চেক করে।
• Validator Function:
  • validator ফাংশন ইনপুটের মান চেক করে এবং কোনো ভুল থাকলে একটি ত্রুটির বার্তা রিটার্ন করে।
  • যদি ইনপুট সঠিক হয়, তাহলে null রিটার্ন করা হয়, যা নির্দেশ করে যে ইনপুট সঠিক।

ধাপ ৩: ফর্ম সাবমিট করা এবং Validation চেক করা:

• একটি বাটন যোগ করা হয় যা ক্লিক করলে ফর্মের Validation চেক করে। যদি ফর্ম সঠিক হয়, তাহলে একটি স্ন্যাকবার (Snackbar) প্রদর্শিত হয়।
• validate() মেথড ফর্মের প্রতিটি validator কল করে এবং চেক করে সব ইনপুট সঠিক আছে কিনা।
• save() মেথড ফর্মের স্টেট সংরক্ষণ করে এবং ইনপুটের মান _email এবং _password ভেরিয়েবল এ সংরক্ষণ করে।

Error Handling এবং Snackbar প্রদর্শন করা:

• যদি ফর্ম সঠিক না হয়, তাহলে ScaffoldMessenger ব্যবহার করে একটি Snackbar প্রদর্শন করা হয়, যা ইউজারকে ইনপুটের ত্রুটি সম্পর্কে জানায়।

Form Validation এর গুরুত্বপূর্ণ পয়েন্টস:

Required Validation:

• প্রতিটি ইনপুট ফিল্ডে validator ফাংশনের মাধ্যমে চেক করা হয় যে ইনপুট ফিল্ড ফাঁকা আছে কিনা।

Pattern Matching (RegExp):

• Email ইনপুট ফিল্ডে একটি রেগুলার এক্সপ্রেশন (RegExp) ব্যবহার করে ইমেইল সঠিক ফরম্যাটে আছে কিনা চেক করা হয়।

Custom Validation:

• পাসওয়ার্ড ফিল্ডে চেক করা হয় পাসওয়ার্ডের দৈর্ঘ্য অন্তত ৬ ক্যারেক্টার আছে কিনা।

Snackbar দিয়ে Error Message প্রদর্শন:

• ScaffoldMessenger ব্যবহার করে ইউজারকে একটি Snackbar মেসেজের মাধ্যমে ইনপুটের ত্রুটি সম্পর্কে জানানো হয়।

Form Validation এর সুবিধা:

• ব্যবহারকারীর ইনপুট চেক করা: Form Validation এর মাধ্যমে ইউজার সঠিক তথ্য ইনপুট করছে কিনা তা নিশ্চিত করা যায়।
• Error Handling: ইউজার যদি ভুল তথ্য ইনপুট করে, তাহলে ফর্মের মাধ্যমে সেই ভুল ধরিয়ে দিয়ে সঠিক তথ্য ইনপুট করতে উৎসাহিত করা হয়।
• ফর্মের সঠিকতা নিশ্চিত করা: Validation নিশ্চিত করে যে ইউজারের দেয়া তথ্য প্রক্রিয়াকরণের জন্য উপযুক্ত।

Form Validation এবং Error Handling এর মাধ্যমে ইউজারের অভিজ্ঞতা উন্নত হয় এবং অ্যাপ্লিকেশন সঠিকভাবে কাজ করে।

Flutter এ TextField এবং Dropdown Widget ব্যবহার করে আপনি ব্যবহারকারীর ইনপুট সংগ্রহ এবং অপশন থেকে একটি নির্বাচন করানোর ব্যবস্থা করতে পারেন। এগুলো সাধারণত ফর্ম তৈরিতে বা ডেটা সংগ্রহের জন্য ব্যবহৃত হয়। নিচে TextField এবং Dropdown এর বিস্তারিত ব্যাখ্যা এবং উদাহরণ দেয়া হলো।

TextField:

TextField হলো একটি ইনপুট Widget, যা ব্যবহারকারী থেকে টেক্সট ইনপুট গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত নাম, ইমেইল, পাসওয়ার্ড, বা অন্য টেক্সট ডেটা সংগ্রহের জন্য ব্যবহৃত হয়।

TextField এর বৈশিষ্ট্য:

• controller: TextEditingController ব্যবহার করে ইনপুটের মান সংগ্রহ এবং আপডেট করা যায়।
• decoration: TextField এর স্টাইল কাস্টমাইজ করতে InputDecoration ব্যবহার করা হয়।
• keyboardType: কী-বোর্ড টাইপ নির্ধারণ করতে, যেমন টেক্সট, নম্বর, ইমেইল ইত্যাদি।
• obscureText: পাসওয়ার্ড বা সিকিউর টেক্সট ইনপুটের জন্য ব্যবহার করা হয়।

TextField এর উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final TextEditingController _nameController = TextEditingController();

  @override
  void dispose() {
    _nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(
          controller: _nameController,
          decoration: InputDecoration(
            labelText: 'Name',
            hintText: 'Enter your name',
            border: OutlineInputBorder(),
          ),
        ),
        SizedBox(height: 16.0),
        ElevatedButton(
          onPressed: () {
            print('Name: ${_nameController.text}');
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}

• controller: _nameController এর মাধ্যমে ইনপুট ফিল্ডের মান সংগ্রহ করা হয়েছে।
• decoration: InputDecoration ব্যবহার করে লেবেল, হিন্ট, এবং বর্ডার স্টাইল করা হয়েছে।
• SizedBox: বাটন এবং TextField এর মধ্যে স্পেস যোগ করা হয়েছে।

DropdownButton:

DropdownButton ব্যবহার করে আপনি একটি ড্রপডাউন মেনু তৈরি করতে পারেন, যেখানে ব্যবহারকারী একটি অপশন থেকে নির্বাচন করতে পারেন। এটি সাধারণত ফর্মের একটি গুরুত্বপূর্ণ উপাদান, যেমন দেশ নির্বাচন, জেন্ডার নির্বাচন, বা অন্য যেকোনো অপশনের তালিকা।

DropdownButton এর বৈশিষ্ট্য:

• value: ড্রপডাউন বাটনের বর্তমান মান।
• items: ড্রপডাউন মেনুর তালিকা যেখানে প্রতিটি অপশন DropdownMenuItem হিসেবে উপস্থাপিত।
• onChanged: ব্যবহারকারী যখন একটি অপশন সিলেক্ট করে, তখন এই মেথড কল হয় এবং নতুন মান সেট করা হয়।
• hint: ড্রপডাউন মেনুর উপর একটি হিন্ট বা নির্দেশিকা দেখায়।

DropdownButton এর উদাহরণ:

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  String? _selectedOption;
  final List<String> _options = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        DropdownButton<String>(
          value: _selectedOption,
          hint: Text('Select an option'),
          items: _options.map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: (String? newValue) {
            setState(() {
              _selectedOption = newValue!;
            });
          },
        ),
        SizedBox(height: 16.0),
        ElevatedButton(
          onPressed: () {
            print('Selected Option: $_selectedOption');
          },
          child: Text('Submit'),
        ),
      ],
    );
  }
}

• value: _selectedOption ভেরিয়েবলে বর্তমানে নির্বাচিত অপশন রাখা হয়েছে।
• items: _options তালিকা থেকে প্রতিটি অপশন DropdownMenuItem হিসেবে প্রদর্শন করা হয়েছে।
• onChanged: ব্যবহারকারী যখন একটি অপশন সিলেক্ট করে, তখন নতুন মান _selectedOption এ সেট করা হয়েছে।
• hint: যদি কোনো অপশন সিলেক্ট করা না থাকে, তাহলে একটি নির্দেশিকা (হিন্ট) দেখানো হয়।

TextField এবং DropdownButton এর ব্যবহারিক সুবিধা:

• ডেটা ইনপুট: TextField ব্যবহার করে ব্যবহারকারী বিভিন্ন ডেটা ইনপুট করতে পারেন, যেমন টেক্সট, নম্বর, ইমেইল ইত্যাদি।
• অপশন নির্বাচন: DropdownButton ব্যবহার করে ব্যবহারকারী একটি তালিকা থেকে একটি অপশন বেছে নিতে পারেন।
• কাস্টমাইজেশন: TextField এবং DropdownButton দুটোই কাস্টমাইজ করা যায় যাতে আপনি বিভিন্ন স্টাইল এবং ফাংশনালিটি যোগ করতে পারেন।

TextField এবং DropdownButton সংক্ষেপে আলোচনা:

TextField এবং DropdownButton এর মাধ্যমে Flutter এ একটি সম্পূর্ণ ইনপুট ফর্ম তৈরি করা যায়, যা ব্যবহারকারীর ইনপুট গ্রহণ ও প্রক্রিয়াজাত করে।

Flutter-এ Custom Input Widgets তৈরি করা একটি শক্তিশালী এবং ফ্লেক্সিবল পদ্ধতি, যা আপনাকে একটি ইউনিক এবং কাস্টমাইজড ইনপুট অভিজ্ঞতা তৈরি করতে সাহায্য করে। Custom Input Widgets তৈরি করার মাধ্যমে আপনি অ্যাপের থিম বা ব্র্যান্ডিংয়ের সাথে মিলিয়ে ইনপুট ফিল্ড ডিজাইন করতে পারেন এবং প্রয়োজনমতো এর ফাংশনালিটি বাড়াতে পারেন।

Custom Input Widgets তৈরি করার ধাপ

Flutter-এ Custom Input Widgets তৈরি করতে, সাধারণত আমরা TextFormField বা TextField উইজেটকে কাস্টমাইজ করে নতুন উইজেট তৈরি করি। নিচে Custom Input Widget তৈরির উদাহরণ এবং কৌশল নিয়ে আলোচনা করা হলো:

উদাহরণ: একটি Custom Input Widget তৈরি করা

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Input Widget Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              CustomInputField(
                labelText: 'Username',
                icon: Icons.person,
              ),
              SizedBox(height: 20),
              CustomInputField(
                labelText: 'Password',
                icon: Icons.lock,
                obscureText: true,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Custom Input Field Widget
class CustomInputField extends StatelessWidget {
  final String labelText;
  final IconData icon;
  final bool obscureText;

  const CustomInputField({
    required this.labelText,
    required this.icon,
    this.obscureText = false,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      obscureText: obscureText,
      decoration: InputDecoration(
        labelText: labelText,
        prefixIcon: Icon(icon),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        filled: true,
        fillColor: Colors.grey[200],
      ),
    );
  }
}

কোডের ব্যাখ্যা

1. CustomInputField: এটি একটি StatelessWidget যা একটি কাস্টম ইনপুট ফিল্ড তৈরি করে।
   • labelText: ইনপুট ফিল্ডের লেবেল হিসেবে প্রদর্শিত হবে।
   • icon: ইনপুট ফিল্ডের পাশে একটি আইকন প্রদর্শিত হবে।
   • obscureText: পাসওয়ার্ড ইনপুটের জন্য ফিল্ডকে হাইড করা যাবে।
2. TextFormField:
   • decoration: InputDecoration ব্যবহার করে ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা হয়েছে।
   • prefixIcon: ইনপুট ফিল্ডের সামনে একটি আইকন যোগ করা হয়েছে।
   • border: বর্ডার রেডিয়াস এবং বর্ডার স্টাইল সেট করা হয়েছে, যা ইনপুট ফিল্ডকে রাউন্ডেড এজ দেয়।
   • fillColor: ইনপুট ফিল্ডের ব্যাকগ্রাউন্ড কালার দেওয়া হয়েছে, যা ফিল্ডের স্টাইল আরও উন্নত করে।

Custom Input Widgets-এর অন্যান্য কাস্টমাইজেশন

Flutter-এ Custom Input Widgets তৈরি করার সময় আপনি বিভিন্ন প্রপার্টি ব্যবহার করে উইজেটকে আরও কাস্টমাইজ করতে পারেন। নিচে কিছু কাস্টমাইজেশন নিয়ে আলোচনা করা হলো:

১. বর্ডার স্টাইল কাস্টমাইজ করা

InputDecoration(
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.blue, width: 2.0),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.green, width: 2.0),
  ),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
)

• enabledBorder: যখন ইনপুট ফিল্ড সক্রিয় (ফোকাসে নেই) থাকে তখন বর্ডার কেমন হবে।
• focusedBorder: ইনপুট ফিল্ড ফোকাসে গেলে বর্ডার কেমন হবে।

২. প্যাডিং এবং মার্জিন কাস্টমাইজ করা

InputDecoration(
  contentPadding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),
)

• contentPadding: ইনপুট ফিল্ডের ভেতরের টেক্সট এবং অন্যান্য উপাদানের চারপাশে প্যাডিং যোগ করতে ব্যবহৃত হয়।

৩. হিন্ট এবং লেবেল কাস্টমাইজ করা

InputDecoration(
  labelText: 'Email',
  hintText: 'Enter your email',
  labelStyle: TextStyle(color: Colors.blue, fontSize: 16.0),
  hintStyle: TextStyle(color: Colors.grey),
)

• labelText: ইনপুট ফিল্ডের লেবেল হিসেবে কাজ করে।
• hintText: ইনপুট ফিল্ডের ভেতরে টেক্সট দেখায়, যা ইনপুটের প্রয়োজনীয়তা ব্যাখ্যা করে।
• labelStyle এবং hintStyle: লেবেল এবং হিন্ট টেক্সটের স্টাইল কাস্টমাইজ করা যায়।

৪. Error এবং Helper Text কাস্টমাইজ করা

InputDecoration(
  errorText: 'This field cannot be empty',
  helperText: 'Please enter your username',
  errorStyle: TextStyle(color: Colors.red, fontSize: 12.0),
)

• errorText: ইনপুট ভুল হলে একটি এরর মেসেজ দেখানো হয়।
• helperText: ইনপুট ফিল্ডের নিচে সহায়ক টেক্সট দেখানোর জন্য ব্যবহৃত হয়।
• errorStyle: এরর টেক্সটের স্টাইল কাস্টমাইজ করা যায়।

৫. কাস্টম কন্ট্রোলার এবং ফাংশনালিটি যুক্ত করা

Flutter-এ আপনি কাস্টম ইনপুট উইজেটে TextEditingController এবং অন্যান্য কাস্টম ফাংশন যুক্ত করতে পারেন, যা ইনপুট ফিল্ডের ডেটা হ্যান্ডেল করতে সাহায্য করে।

class CustomInputField extends StatelessWidget {
  final String labelText;
  final IconData icon;
  final bool obscureText;
  final TextEditingController controller;

  const CustomInputField({
    required this.labelText,
    required this.icon,
    this.obscureText = false,
    required this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      obscureText: obscureText,
      decoration: InputDecoration(
        labelText: labelText,
        prefixIcon: Icon(icon),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        filled: true,
        fillColor: Colors.grey[200],
      ),
    );
  }
}

উদাহরণ: কাস্টম কন্ট্রোলার ব্যবহার করে

final TextEditingController usernameController = TextEditingController();

CustomInputField(
  labelText: 'Username',
  icon: Icons.person,
  controller: usernameController,
)

• controller ব্যবহার করে ইনপুট ফিল্ডের ভ্যালু সংগ্রহ করা এবং ম্যানেজ করা যায়।

৬. Custom Input Widget-এর সুবিধা

• পুনঃব্যবহারযোগ্যতা: একবার একটি Custom Input Widget তৈরি করলে আপনি বিভিন্ন স্ক্রিন বা স্থানে সেটি পুনঃব্যবহার করতে পারবেন।
• কোড ম্যানেজমেন্ট: কোড কাস্টমাইজ করার সময় এবং ফাংশনালিটি যোগ করার ক্ষেত্রে এটি কোডকে সংগঠিত এবং পরিষ্কার রাখে।
• ডিজাইন এবং ব্র্যান্ডিং: অ্যাপ্লিকেশনের থিম এবং ব্র্যান্ডিং অনুযায়ী কাস্টম ইনপুট উইজেট তৈরি করা যায়।

Custom Input Widgets তৈরির টিপস

1. মাল্টিপারামিটার ব্যবহার করুন: ইনপুট উইজেটের স্টাইল এবং ফাংশনালিটি পরিবর্তন করতে বিভিন্ন প্যারামিটার যোগ করুন।
2. Global Key ব্যবহার করুন: ইনপুট ফিল্ডের ভ্যালিডেশন বা সাবমিশনের জন্য GlobalKey<FormState> ব্যবহার করে ফর্ম কন্ট্রোল করুন।
3. Custom Validation ফাংশন: Custom Input Widgets-এর জন্য কাস্টম ভ্যালিডেশন ফাংশন যুক্ত করে ইনপুট যাচাই করুন।

এভাবে, Flutter-এ Custom Input Widgets তৈরি করে আপনি আপনার অ্যাপ্লিকেশনকে আরও ডাইনামিক, ইউনিক, এবং ব্যবহারের সহজ করে তুলতে পারেন।